<!-- 内容面板 -->
<template>
    <div class="wrap-panel" 
         :style=" {marginBottom: guttur+'px'} "  
         v-if="show"
         @click="handlePanel">
        <div class="wrap-panel-header" v-if="header">
            <span class="wrap-panel-header_img">
                <x-img :src="list.src"></x-img>
            </span>
            <span class="wrap-panel-header_name">{{list.user}}</span>
            <span class="wrap-panel-header_icon" v-if="button" @click='remove()'><o-icon name="close" slot="right" :size="15"></o-icon></span>
        </div>
        <div class="wrap-panel_title" v-if="title">{{list.title}}</div>
        <div class="wrap-panel_desc">
            <p :style="{WebkitLineClamp: descLine}">{{list.desc}}</p>
        </div>
        <div class="wrap-panel-footer" v-if="footer">
            <span class="wrap-panel-footer_likes" v-if="list.likes">{{list.likes}}&nbsp;点赞&nbsp;·</span>
            <span class="wrap-panel-footer_comments" v-if="list.comments">{{list.comments}}&nbsp;评论&nbsp;·</span>
            <span class="wrap-panel-footer_time">{{list.time}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: Object,

        header: {
            type: Boolean,
            default: false
        },

        title: {
            type: Boolean,
            default: false
        },

        button: {
            type: Boolean,
            default: false
        },

        footer: {
            type: Boolean,
            default: false
        },

        guttur: {
            type: Number,
            default: 12
        },

        line: {
            type: Number,
            default: 3
        },

        link: {
            type: String
        }
    },

    data(){
        return{
            descLine: this.line,
            show:true
        }
    },

    computed: {},

    methods: {
        remove : function(){
            this.show=false;
            console.log(this.show)
        },
        delete : function(index){
            
        },
        handlePanel(){
            if(this.link) this.$router.push(this.link)
        }
    }
}

</script>

<style lang='less'>

@pn: wrap-panel;
.@{pn}{
    width: 100%;
	margin-bottom: 12px;
    padding: 14px 12px;
    background: #FFF;
    box-shadow: @shadow;
    &:active{
        background: darken(#FFF,5%);
    }
}
.@{pn}-header{
    height: 24px;
    color: @secondaryTextColor;
    font-size: 14px;

    &_img{
        margin-right: 4px;
        & img{
            width: 20px;
            height: 20px;
            border-radius: 10px;
        }
    }

    &_name{
        vertical-align: text-top;
        line-height: 0.7em;
    }

    &_icon{
        vertical-align: text-top;
        float: right;
        line-height: 0.7em;
    }
}

.@{pn}_title{
    padding-top: 6px;
    font-size: 16px;
    font-weight: bold;
}

.@{pn}_desc{
    padding: 8px 0;
    line-height: 1.4em;
    font-size: 13px;

    p{
        display: -webkit-box;    
        // -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    span{
        line-height: 1.8em;
        color: @primaryColor;
    }
}

.@{pn}-footer{
    padding-top: 4px;
    color: @secondaryTextColor;
    font-size: 13px;
    vertical-align: bottom;
}

</style>